import React, { Component } from 'react'

import FilterFooter from '../../../../components/FilterFooter'

import styles from './index.module.scss'

export default class FilterMore extends Component {
  state = {
    selectedValues: this.props.defaultValue
  }
  // 渲染标签
  renderFilters (data) {
    // 高亮标签的类名 styles.tagActive
    // return(
    //   <span className={[styles.tag, styles.tagActive].join(' ')}>东北</span>
    // )
    return data.map(item => {
      const { selectedValues } = this.state
      const isSelected = selectedValues.indexOf(item.value) > -1
      return (
        <span
          key={item.value}
          onClick={() => this.onTagClick(item.value)}
          className={[styles.tag, isSelected ? styles.tagActive : ''].join(' ')}
        >
          {item.label}
        </span>
      )
    })
  }
  // 标签的点击事件
  onTagClick (value) {
    // console.log(value)
    const { selectedValues } = this.state
    // set a new array
    const newSelectedValues = [...selectedValues]
    // 判断当前点击项的内容在不在这个数组中，并且做相应的处理
    if (selectedValues.indexOf(value) <= -1) {
      // 没有当前的值
      newSelectedValues.push(value)
    } else {
      // 原数组中有这个值，那么再点击一次，就是让他消失
      // 需要判断这个值在数组中的位置，然后再删除它
      const index = newSelectedValues.findIndex(item => item === value)
      // 使用数组的splice方法，根据索引好删除
      newSelectedValues.splice(index, 1)
    }
    this.setState({
      selectedValues: newSelectedValues
    })
  }

  // 点击清除按钮
  onCancel = () => {
    this.setState({
      selectedValues: []
    })
  }
  onOk = () => {
    const { type, onSave } = this.props

    onSave(type, this.state.selectedValues)
  }
  render () {
    const {
      data: { roomType, oriented, floor, characteristic },
      onCancel
    } = this.props
    return (
      <div className={styles.root}>
        {/* 遮罩层 */}
        <div className={styles.mask} onClick={onCancel} />

        {/* 条件内容 */}
        <div className={styles.tags}>
          <dl className={styles.dl}>
            <dt className={styles.dt}>户型</dt>
            <dd className={styles.dd}>{this.renderFilters(roomType)}</dd>

            <dt className={styles.dt}>朝向</dt>
            <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>

            <dt className={styles.dt}>楼层</dt>
            <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

            <dt className={styles.dt}>房屋亮点</dt>
            <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
          </dl>
        </div>

        {/* 底部按钮 */}
        <FilterFooter
          className={styles.footer}
          cancelText='清除'
          onCancel={this.onCancel}
          onOk={this.onOk}
        />
      </div>
    )
  }
}
